<template>
  <div class="details-container-padding">
    <div class="buttonList">
      <el-button type="primary" @click="editInfo">编辑博士后信息</el-button>
      <el-button type="primary" @click="editStatus">修改状态</el-button>
      <el-button type="primary" @click="addReport">季报填写</el-button>
      <el-button type="danger" @click="delEvent">删除</el-button>
    </div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="博士后信息" name="one">
        <AddPersonnel
          :disabled="true"
          :operation="true"
          style="margin-top: 4px"
          @save="closeEdit"
        />
      </el-tab-pane>
      <el-tab-pane label="成果及荣誉" name="two">
        <Honeors />
      </el-tab-pane>
      <el-tab-pane label="季报信息" name="three">
        <Report />
      </el-tab-pane>
    </el-tabs>

    <!-- dialog -->
    <el-dialog
      v-model="workingDialog"
      title="修改博士后状态"
      width="500"
      align-center
    >
      <div class="dialogcontent">
        <div class="top">
          {{ baseUserInfo.name }}（编号：{{ baseUserInfo.employeeNumber }}）
        </div>
        <div class="middle">
          <span>工作状态：</span>
          <el-radio-group v-model="baseUserInfo.workStatus">
            <el-radio-button
              v-for="item in workStatusList"
              :key="item.value"
              :value="item.value"
            >
              {{ item.label }}
            </el-radio-button>
          </el-radio-group>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button style="margin-right: 10px" @click="workingDialog = false">
            取消
          </el-button>
          <el-button type="primary" @click="handEditWork">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
  import { ref, computed, onMounted } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  import type { TabsPaneContext } from 'element-plus'
  import AddPersonnel from './addPersonnel.vue'
  import Report from './report.vue'
  import Honeors from './honorsTable.vue'
  import { reportOptions } from '../table/column'
  import { useDictStore } from '@/store/modules/dict'
  import {
    getPersonnelInfo,
    updatePersonnelWork,
    deletePersonnel,
  } from '@/api/postdoctor'
  import { useCloseTabNavigate } from '@/utils/useCloseTabNavigate'
  import { on } from 'events'
  // import { storeToRefs } from 'pinia'
  // import { useUserStore } from '../pinia/pinia'

  // const store = useUserStore()
  // const { baseUserInfo } = storeToRefs(store)
  const { closeTabNavigate } = useCloseTabNavigate()
  const dictStore = useDictStore()
  const workStatusList = computed(() =>
    dictStore.getDictType('postdoc_work_status')
  )

  const activeName = ref('one')
  const router = useRouter()
  const route = useRoute()

  const id = route.query.id
  // 通过 id 查询用户信息
  const baseUserInfo = ref({})
  const workingDialog = ref(false)

  const closeEdit = () => {
    isEdit.value = false
  }

  const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
  }

  const addReport = () => {
    // router.push({
    //   path: '/postdoctor/personnel/quarterlyReport',
    //   query: { id: route.query.id },
    // })
    activeName.value = 'three'
  }

  onMounted(() => {
    const addReports = route.query.addReport
    if (addReports) {
      addReport()
    }
  })

  const isEdit = ref(false)
  const editInfo = () => {
    isEdit.value = true
  }

  const save = () => {
    isEdit.value = false
  }
  const editStatus = () => {
    const params = {
      id: route.query.id,
      getType: 2,
    }
    getPersonnelInfo(params).then((res) => {
      baseUserInfo.value = res.data
      workingDialog.value = true
    })
  }

  const handEditWork = () => {
    const params = {
      id: workingDetails.value.id,
      workStatus: workingDetails.value.workStatus,
    }
    updatePersonnelWork(params).then((res) => {
      ElMessage({
        type: 'success',
        message: '修改成功',
      })
      workingDialog.value = false
    })
  }

  const delEvent = () => {
    ElMessageBox.confirm('确定删除该条博士后?', '删除博士后', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(() => {
      deletePersonnel(route.query.id).then((res) => {
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
        closeTabNavigate({ name: 'Personnel' })
      })
    })
  }
</script>

<style scoped lang="scss">
  $margin-bottom: 20px;
  .buttonList {
    display: flex;
    justify-content: end;
    padding-bottom: $margin-bottom;
    border-bottom: 1px solid #edeff2;
  }
  .dialogcontent {
    padding: 20px;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    font-size: 14px;
    font-weight: bold;

    .top {
      margin-bottom: 20px;
    }

    .middle {
      display: flex;
      align-items: center;
    }
  }
</style>
